<template>
  <div class="trends-chart-container">
    <div class="chart-header-container">
      <div class="chart-title">Hashtag Detection</div>
      <div class="refresh-and-checkbox-container">
        <!-- <div class="checkbox-container">
          <el-checkbox v-model="checked">Previous Period</el-checkbox>
        </div> -->
        <div class="refresh-icon-container">
          <img src="@/assets/fresh.png" alt="" />
        </div>
      </div>
    </div>
    <!-- 图表展示区域 -->
    <div class="chart-graph">
      <PieChart :option="optionLineGraph" :height="'300px'"></PieChart>
    </div>
  </div>
</template>

<script>
import PieChart from "@components/common/PieChart.vue";

export default {
  components: {
    PieChart,
  },
  data() {
    return {
      timeSelect: "",
      checked: false,
      options: [
        {
          value: "1",
          label: "一月份",
        },
        {
          value: "2",
          label: "二月份",
        },
      ],
      optionLineGraph: {
        title: {
          //   text: "Customer Journey",
        },
        subtitle: {
          text: "by scores",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        grid: {
          left: "0%",
          right: "3%",
          bottom: "5%", // 增加底部边距，避免X轴标签被截断
          top: "13%",
          containLabel: true,
        },
        xAxis: {
          show: true,
          boundaryGap: false,
          type: "category",
          boundaryGap:false, // 两侧各留出10%的间隙
          data: ["Hotel Operations", "Others"],
          axisLine: {
            show: true,
          },
          splitLine: {
            show: false,
            lineStyle: {
              color: "#ccc",
              type: "solid",
            },
          },
          splitNumber: 1, // 只显示一条分割线
          axisTick: {
            show: false,
            alignWithLabel: true, // 使刻度线与标签对齐
          },
          axisLabel: {
            margin: 30, // 关键：增加标签与 Y 轴的间距（原值可能为 0 或较小）
            color: "#6a6969",
            fontSize: 12,
            align: "center",
            // 新增：文字位置靠右（适用于类目轴）
            position: 'outside', // 标签显示在轴外侧
          },
          
        },
        yAxis: [
          {
            type: "value",
            axisLabel: {
              align: "right", // 刻度标签水平对齐：右对齐（贴近轴线）
              margin: 20, // 调整标签与轴线的距离
              color: "#6a6969", // 标签文字颜色
              fontSize: 12, // 标签文字大小
              overflow: "truncate", // 文字溢出时截断显示
              fontWeight: 400, // 文字粗细（正常）
            },
            // offset: 30, // 关键：添加Y轴偏移量
            name: "by scores",
            nameGap: 20, // 名称与轴线的距离（单位：像素）
            min: 1,
            max: 10,
            interval: 1,
            position: "left",
            axisTick: {
              inside: true, // 刻度线朝内（朝向图表区域）
              interval: 10, // 刻度线间隔（此处可能无效，因 min/max/interval 已定义）
            }, // 刻度线朝内（图表区域）
            splitLine: {
              show: false,
            },
            nameTextStyle: {
              fontSize: 14, // 名称文字大小
              fontWeight: 400, // 文字粗细
              // align: "right", // 旋转后文字的水平对齐：右对齐（文字右侧贴近轴线）
            },
          },
          {
            type: "value",
            name: "by # of voices ",
            nameLocation: "end", // 将名称放在轴的底部
            nameGap: 20, // 名称与轴线的距离（单位：像素）
            min: 0, // 最小值
            max: 100, // 最大值
            offset: 10, // 坐标轴偏移量（与左侧坐标轴的水平距离，避免重叠）
            interval: 10, // 刻度间隔（如 0, 10, 20, ...）
            position: "right", // 坐标轴位置：右侧
            splitLine: {
              show: false,
            },
            axisLabel: {
              align: "right", // 保持右对齐
              inside: true, // 将标签放在轴线右侧
              margin: -22, // 调整标签与轴线的距离
              formatter: function (value) {
                // 只显示0,40,60,80,100，其他刻度返回空字符串
                return [0, 20, 30, 40, 50, 60, 70, 80, 90, 100].includes(value)
                  ? value + "k"
                  : "";
              },
            },
            nameTextStyle: {
              fontSize: 14, // 名称文字大小
              color: "#6a6969", // 名称文字颜色
              fontWeight: 400, // 文字粗细
              align: "right", // 旋转后文字的水平对齐：右对齐（文字右侧贴近轴线）
              verticalAlign: "middle", // 旋转后文字的垂直对齐：居中
              rotate: 90, // 文字旋转角度（-90度：垂直向上，向左显示）
              padding: [0, -23, 0, 0], // 文字内边距（上、右、下、左）
            },
          },
        ],
        legend: {
          orient: "horizontal",
          left: "20%",
          bottom: "0%",
          icon: "rect", // 基础图标为矩形
          itemWidth: 30,
          itemHeight: 5,
          itemGap: 20,
          borderWidth: 0,
          padding: [0, 0, 0, 10],
          data: [
            "#messystreets",
            "#breakfastview",
            "#slowwifi",
            "#oceanview",
            "#seamlesscheckin",
          ],
          // 关键：添加 itemStyle 配置圆角
          itemStyle: {
            borderRadius: 3, // 圆角半径（单位：像素）
          },
          textStyle: {
            color: "#6a6969",
            fontSize: 12,
            margin: 10, // 文字与图标的间距
          },
        },
        series: [
          {
            name: "#messystreets",
            type: "scatter",
            symbol: "circle",
            symbolSize: (data) => data[1],
            data: this.generateBubbleData(9, 2), // 声音数量基础值 40
            yAxisIndex: 0,
            itemStyle: {
              color: "#FDDF1D",
              opacity: 0.8,
              borderWidth: 0.5,
              borderColor: "#fff",
            },
            emphasis: {
              label: {
                show: true,
                formatter: "{b}<br>声音数量: {c}",
              },
            },
          },
          {
            type: "line", // 用 line 类型（无实际线条）
            symbol: "none", // 隐藏数据点
            lineStyle: { opacity: 0 }, // 隐藏线条
            markArea: {
              itemStyle: {
                color: "rgba(166, 233, 185, 0.1)", // 标记区域颜色
                borderWidth: 0, // 去掉边框
              },
              data: [
                [
                  { xAxis: "Hotel Operations", yAxis: 7 }, // 对应 x 轴类目
                  { xAxis: "Others", yAxis: 10 }, // 对应 x 轴类目
                ],
              ],
            },
            z: 0, // 确保在气泡下方
          },
          {
            name: "#breakfastview",
            type: "scatter",
            symbol: "circle",
            symbolSize: (data) => data[2],
            data: this.generateBubbleData(9, 60), // 声音数量基础值 60
            yAxisIndex: 0,
            itemStyle: {
              color: "#FF0000",
              opacity: 0.8,
              borderWidth: 0.5,
              borderColor: "#fff",
            },
            emphasis: {
              /* 同上 */
            },
          },
          {
            name: "#slowwifi",
            type: "scatter",
            symbol: "circle",
            symbolSize: (data) => data[2],
            data: this.generateBubbleData(6, 40), // 基础分数6，基础声音40
            yAxisIndex: 0,
            itemStyle: { color: "#0C3B7C" /* 其他样式 */ },
          },
          {
            name: "#oceanview",
            type: "scatter",
            symbol: "circle",
            symbolSize: (data) => data[2],
            data: [this.generateBubbleData(6, 40)], // 注意用数组包裹
            yAxisIndex: 0,
            itemStyle: { color: "#4199E1" /* 其他样式 */ },
          },
          {
            name: "#seamlesscheckin",
            type: "scatter",
            symbol: "circle",
            symbolSize: (data) => data[2],
            data: this.generateBubbleData(9, 70), // 声音数量基础值 70
            yAxisIndex: 0,
            itemStyle: { color: "#BD8DF0" /* 其他样式 */ },
          },
          {
            name: "分割线",
            type: "line",
            data: [
              [0.5, 1], // 分割线起点：X=0.5是两个类目的中间位置，Y=1是Y轴最小值
              [0.5, 10], // 分割线终点：Y=10是Y轴最大值
            ],
            symbol: "none", // 不显示数据点
            lineStyle: {
              color: "#ccc", // 分割线颜色
              width: 1, // 分割线宽度
              type: "solid", // 分割线样式
            },
            z: 0, // 置于底层，不遮挡气泡
          },
        ],
      },
    };
  },
  mounted() {
    console.log(this.timeSelect, "这是值");
  },
  methods: {
    generateBubbleData(baseScore, baseVoices, count = 2) {
      return Array.from({ length: count }, (_, i) => [
        i, // X坐标（0: Hotel Operations, 1: Others）
        baseScore + (Math.random() * 2 - 1), // 分数在baseScore±1范围内
        baseVoices + (Math.random() * 20 - 10), // 声音数量在baseVoices±10范围内
      ]);
    },
  },
};
</script>

<style scoped lang="scss">
.trends-chart-container {
  margin-top: 35px;
  display: flex;
  flex-direction: column;
  padding: 16px 42px;
  align-items: center;
  justify-content: space-between;
  background: #ffffff;
  border: 1px solid #cdcccc;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgb(0 0 0 / 5%);

  .chart-header-container {
    align-items: center;
    width: 100%;
    display: flex;
    justify-content: space-between;

    .chart-title {
      font-size: 18px;
      font-weight: 600;
      color: #454545;
    }

    .refresh-and-checkbox-container {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .checkbox-container {
      el-checkbox {
        font-weight: 400;
        font-size: 14px;
        color: #232323;
      }
    }

    .refresh-icon-container {
      margin-left: 24px;
      cursor: pointer;
    }
  }

  .chart-graph {
    width: 100%;
  }
}

.chart-header {
  display: flex;
  justify-content: space-between;
  padding: 0 10px;
}

.chart-selection {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.selection-label {
  margin-right: 10px;
  font-size: 16px;
}

.select-source,
.select-trend {
  width: 150px;
  margin-right: 20px;
  color: "#3c3c43";
  border-radius: 10px;
}

.select-source.is-placeholder.el-input__inner::placeholder,
.select-trend.is-placeholder.el-input__inner::placeholder {
  color: "#3c3c43" !important;
}
</style>
